<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重要纪念日 - 甜蜜空间</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/memory.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 添加Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header>
        <div class="container">
            <h1><i class="fas fa-heart"></i> 甜蜜空间</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="album.html">相册</a></li>
                    <li><a href="diary.html">日志</a></li>
                    <li><a href="memory.html" class="active">纪念日</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section class="memory-header">
        <div class="container">
            <h2>重要的日子</h2>
            <p>记录和提醒我们之间每一个特别的日子</p>
            <button id="add-memory-btn" class="btn btn-primary"><i class="fas fa-plus"></i> 添加新纪念日</button>
        </div>
    </section>

    <section class="memory-timeline">
        <div class="container">
            <div class="timeline-wrap">
                <div class="timeline-header">
                    <div class="together-days">
                        <div class="days-number" id="total-days">0</div>
                        <div class="days-label">在一起的天数</div>
                    </div>
                </div>

                <!-- 时间线内容将由JavaScript动态生成 -->
                <div class="timeline">
                    <!-- 这里将通过JS从JSON数据加载内容 -->
                </div>
            </div>
        </div>
    </section>

    <section class="upcoming-dates">
        <div class="container">
            <h2 class="section-title">即将到来的重要日子</h2>
            <!-- 即将到来的日期将由JavaScript动态生成 -->
            <div class="upcoming-grid">
                <!-- 这里将通过JS从JSON数据加载内容 -->
            </div>
        </div>
    </section>

    <div id="add-memory-modal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>添加重要纪念日</h2>
            <div class="memory-form">
                <div class="form-group">
                    <label>纪念日名称</label>
                    <input type="text" placeholder="例如：第一次约会、恋爱纪念日...">
                </div>
                <div class="form-group">
                    <label>日期</label>
                    <input type="date">
                </div>
                <div class="form-group">
                    <label>类型</label>
                    <select>
                        <option value="anniversary">恋爱纪念日</option>
                        <option value="birthday">生日</option>
                        <option value="festival">节日</option>
                        <option value="special">特别的日子</option>
                        <option value="other">其他</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>描述</label>
                    <textarea rows="4" placeholder="这一天发生了什么？为什么这一天很特别？"></textarea>
                </div>
                <div class="form-group">
                    <label>添加照片</label>
                    <div class="photo-upload">
                        <button class="btn btn-secondary"><i class="fas fa-camera"></i> 选择照片</button>
                        <input type="file" accept="image/*" multiple style="display: none;">
                        <div class="upload-preview">
                            <!-- 照片预览区域 -->
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>标签</label>
                    <div class="tags-input">
                        <input type="text" placeholder="输入标签后按回车添加...">
                        <div class="tags-list">
                            <!-- 标签将在这里显示 -->
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label>设置提醒</label>
                    <div class="reminder-options">
                        <div class="checkbox-group">
                            <input type="checkbox" id="reminder-1">
                            <label for="reminder-1">提前一周</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="reminder-2">
                            <label for="reminder-2">提前三天</label>
                        </div>
                        <div class="checkbox-group">
                            <input type="checkbox" id="reminder-3">
                            <label for="reminder-3">当天</label>
                        </div>
                    </div>
                </div>
                <div class="form-buttons">
                    <button class="btn btn-secondary">取消</button>
                    <button class="btn btn-primary">保存纪念日</button>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>&copy; 2023 甜蜜空间 - 你我的专属恋爱天地</p>
            <p>一起创造更多美好回忆</p>
        </div>
    </footer>

    <!-- 引入Bootstrap和数据加载相关脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/data-loader.js"></script>
    <script src="js/upload-manager.js"></script>
    <script src="js/memory-editor.js"></script>
    <script src="js/memory.js"></script>
</body>
</html> 